
import React, { useState, useEffect, useRef } from 'react'
import { Card, Table, Button, Divider, Popconfirm, message } from 'antd'
// 引入用户接口
import { getUsers, editUser, deleteUser, addUser } from '@/api/user'

// 引入修改用户组件
import EditUser from './components/editUser'
// 引入添加用户组件
import AddUser from './components/addUser'

/**
 * 列表
 * 修改
 * 删除
 * 添加
 * 只对admin 也就是管理员开放
 * ***/
// 将 Column 从Table 解构出来
const { Column } = Table
const User = (props) => {
    // 变量声明
    const [userList, setUserList] = useState([]) // 用户列表
    const [editVisible, setEditVisible] = useState(false) // 修改用户弹框状态
    const [curRow, setCurRow] = useState({}) // 点开每一行用户数据
    const [addVisible, setAddVisible] = useState(false) // 添加用户弹框状态

    // ref 申明
    const editRef = useRef() // 修改用户弹框的ref
    const addRef = useRef() // 添加用户弹框的ref

    // title 申明
    const title = (
        <span>
            <Button type='primary' onClick={addUsers} >添加用户</Button>
        </span>
    )

    // 初始化 | 生命周期
    useEffect(() => {
        queryUser()
    }, [])
    // 方法
    async function queryUser() { // 请求用户列表
        const { data: { users } } = await getUsers()
        console.log(users)
        // 更新userList
        setUserList(users)
    }
    function edit(row) {  // 修改方法
        console.log(row)
        setCurRow(row)
        setEditVisible(true)
    }
    function editCancel() { //编辑取消方法
        setEditVisible(false)
    }
    function editConfirm() { //编辑确认方法
        editRef.current.validateFields((err, values) => {
            if (!err) {
                // 调用editUser 接口
                editUser(values).then(data => {
                    console.log(data, 'edituser')
                    const { data: { status } } = data
                    if (status === 0) {
                        // 请求列表数据 列表请求中会对列表数据重置
                        queryUser()
                        setEditVisible(false)
                    }
                })

            }
        })
    }
    function confirm(row) { // 删除 确认
        // 请求删除接口
        deleteUser({ id: row.id }).then(data => {
            // 删除成功之后才可以调用 queryUser
            const { data: { status } } = data;
            if (status === 0) {
                message.success('删除成功！')
                queryUser()
            } else {
                message.error('删除成功！')
            }
        })
    }
    function addUsers() { // 添加用户
        setAddVisible(true)
    }
    function addCancel() { // 添加用户弹框的取消方法
        setAddVisible(false)
    }
    function addConfirm() { // 添加用户弹框的确认方法
        addRef.current.validateFields((err, values) => {
            if (!err) {
                // 请求 addUser addUser
                try {
                    addUser(values).then(data => {
                        // 调用queryUser
                        const { data: { status } } = data
                        console.log(data,status)
                        if (status === 0) {
                            message.success('添加成功！')
                            setAddVisible(false)
                            queryUser()
                        }else{
                            message.error('添加失败！')
                        }

                    })
                    
                } catch (error) {
                    console.log(error)
                }
            }
        })
    }

    return (<div className='user'>
        <Card title={title}>
            <Table bordered dataSource={userList} pagination={false} rowKey='id'>
                <Column title='用户ID' dataIndex='id' key='id' align='center' />
                <Column title='用户名称' dataIndex='name' key='name' align='center' />
                <Column title='用户角色' dataIndex='role' key='role' align='center' />
                <Column title='用户描述' dataIndex='description' key='description' align='center' />
                {/* render 参数分别为当前行的值，当前行数据，行索引 */}
                <Column title='操作' key='action' width={190} align='center' render={(text, row) => (
                    <span>
                        <Button type='primary' shape='circle' icon='edit' title='修改' onClick={() => edit(row)} />
                        <Divider type='vertical' />
                        <Popconfirm
                            title="您确认要删除这条数据吗?"
                            onConfirm={() => confirm(row)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button shape='circle' icon='delete' title='删除' />
                        </Popconfirm>
                    </span>
                )} />
            </Table>
        </Card>
        <EditUser ref={editRef} visible={editVisible} curRow={curRow} cancel={editCancel} confirm={editConfirm} />
        <AddUser ref={addRef} visible={addVisible} cancel={addCancel} confirm={addConfirm} />
    </div>)
}

export default User